<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Product Bar Code Searcher</title>

    <script type="text/javascript" src="tgd/Utilities/Throbber.js"></script>

    <script type="text/javascript" src="tgd/Services/Google/Search.js"></script>

    <script type="text/javascript">
        //<![CDATA[

        var db;

        function init() {

			tgd.Services.Google.Search.onResultsReturned = function(result) {
				window.Chrome.Throbber.stop();
				if (result) {
					window.Chrome.TitleList.innerHTML = window.Chrome.ThumbList.innerHTML = "";  //todo: delete from list
					window.Chrome.TitleList.style.display = '';
					window.Chrome.ThumbList.style.display = '';
					window.Chrome.TitleHead.innerHTML = 'Pick your title';
					window.Chrome.MiniThumb.src = '';
					//window.Chrome.Entry.Title = '';
					window.Chrome.Entry.Thumb.src = '';

					window.Chrome.Entry.UPC.innerHTML = result.UPC;
					var titleArray = result.Title.sort(function(a, b) { if (a.toUpperCase() < b.toUpperCase()) { return -1; } else if (a.toUpperCase() > b.toUpperCase()) { return 1; } else { return 0 } })
					for (var i = 0; i < titleArray.length; ++i) {
						var div = document.createElement("div");
						div.innerHTML = titleArray[i];
						div.onclick = function() {
							window.Chrome.TitleHead.innerHTML = window.Chrome.Entry.Title.innerHTML = this.innerHTML;
							window.Chrome.TitleList.style.display = 'none';
						}
						window.Chrome.TitleList.appendChild(div);
					}

					for (var i = 0; i < result.Thumb.length; ++i) {
						var img = document.createElement("img");
						img.src = result.Thumb[i];
						img.height = 50;
						img.onclick = function() {
							window.Chrome.MiniThumb.src = window.Chrome.Entry.Thumb.src = this.src;
							window.Chrome.ThumbList.style.display = 'none';
						};
						window.Chrome.ThumbList.appendChild(img);
					}
				}
			}

			window.Chrome = {};
            window.Chrome.Throbber = new tgd.Utilities.Throbber();
            window.Chrome.TitleHead = document.getElementById("pickTitle");
            window.Chrome.TitleList = document.getElementById("listTitle");
            window.Chrome.ThumbHead = document.getElementById("pickThumb");
            window.Chrome.ThumbList = document.getElementById("listThumb");
            window.Chrome.MiniThumb = document.getElementById("minithumb");
            window.Chrome.Entry = {};
            window.Chrome.Entry.Title = document.getElementById("entryTitle");
            window.Chrome.Entry.UPC = document.getElementById("entryUPC");
            window.Chrome.Entry.Thumb = document.getElementById("entryImg");
            window.Chrome.Library = {};
            window.Chrome.Library.Entries = document.getElementById("libEntries");

            db = openDatabase("document", "1.0", "Offline document storage", 5 * 1024 * 1024);

            db.transaction(function(t) {
                t.executeSql('CREATE TABLE IF NOT EXISTS docids (upc, title, thumburl)', null, function(t, rs) { if (rs.rowsAffected == 1) { alert('Database Table Created!'); } }, function(t, err) { alert(err.message); });
            });

            var b = document.getElementById("body");
            b.appendChild(window.Chrome.Throbber.getCanvas());

            if (window.location.search != "") {
                var upc = window.location.search.substr(5);
                document.getElementById("txtCode").value = upc;

                db.transaction(function(t) {
                    t.executeSql("select upc from docids where upc = ?", [upc], function(t, data) {
                        if (data.rows.length == 0) {
                            db.transaction(function(t2) {
                                t2.executeSql("insert into docids (upc) values (?)", [upc], function(t, data) {
                                    alert("Inserted new UPC [" + upc + "]");
                                    reloadLibrary();
                                })
                            })
                        }
                    })
                });
            }
        }

        function reloadLibrary() {
            window.Chrome.Library.Entries.innerHTML = "";  //todo: empty list;

            db.transaction(function(t) {
                t.executeSql("select upc, title, thumburl from docids", null,
                    function(t, data) {
                        for (var i = 0; i < data.rows.length; ++i) {
                            var div = document.createElement("div");
                            var u = document.createElement("span");
                            var t = document.createElement("span");
                            var tn = document.createElement("img");

                            u.innerHTML = div.title = data.rows.item(i)['upc'];
                            t.innerHTML = data.rows.item(i)['title'];
                            tn.src = data.rows.item(i)['thumburl'];

                            t.className = 'title';
                            u.className = 'upc';

                            div.appendChild(tn);
                            div.appendChild(t);
                            div.appendChild(u);

                            div.onclick = function(e) { var upcToLoad = (e.target.nodeName == "DIV" ? e.target.title : e.target.parentNode.title); load(upcToLoad); /* hack, how to get upc for row clicked? */ };
                            window.Chrome.Library.Entries.appendChild(div);
                        }
                    }, function(t, err) {
                        alert(err.message);
                    }
                );
            }, function(err) { alert(err.message) }, function() { /* success */ });
        }

        function save() {
            db.transaction(function(t) {
                t.executeSql("update docids set title=?, thumburl=? where upc=?", [window.Chrome.Entry.Title.innerHTML, window.Chrome.Entry.Thumb.src, window.Chrome.Entry.UPC.innerHTML], function(t, data) { alert('Saved'); reloadLibrary(); }, function(t, err) { alert(err.message); });
            });
        }

        function load(code) {
            window.Chrome.Throbber.start();

			tgd.Services.Google.Search.getUPC(code);
        }

        //]]>
    </script>

    <style type="text/css">
        body, html
        {
            margin: 0;
            height: 100%;
            width: 100%;
            background: #333;
            font-size: 16pt;
        }
        .throbber
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            font-size: xx-large;
            font-weight: bold;
            text-align: center;
            font-family: 'OCR A Extended' ,Calibri;
            background: #A4C639;
            color: #fff;
        }
        #menu
        {
            border-bottom: solid 1px #ccc;
            background: #A4C639;
            color: #666;
        }
        input
        {
            background: #333;
            margin: 0;
            padding: 0 2px;
            border: solid 1px #ccc;
            color: #A4C639;
            font-weight: bold;
            font-family: consolas;
            font-size: 1em;
        }
        .content
        {
            background: #fff;
            font-family: Consolas, "Lucida Console" ,monospace;
            padding: 3px;
            margin: 10px;
        }
        .content h1
        {
            margin: 0;
            padding: 3px;
            font-size: 1em;
            font-family: calibri;
            background: #A4C639;
            color: #fff;
            border: solid 1px #333;
        }
        h2, h3
        {
            font-size: 1em;
            padding: 0;
            margin: 0;
        }
        .content div, .content h1
        {
            padding: 3px;
        }
        #libEntries div
        {
            clear: both;
        }
        #libEntries div img
        {
            float: left;
        }
        #libEntries div span.title
        {
            margin-left: 1em;
        }
        #libEntries div span.upc
        {
            margin-left: 1em;
            color: #ccc;
            font-size: smaller;
        }
    </style>
</head>
<body id="body" onload="init();">
    <div id="menu">
        <label for="txtCode">
            Bar Code:</label>
        <input id="txtCode" type="text" maxlength="12" size="12" value="678149066722" onkeyup="if (event.keyCode == 13) { load(this.value); }" />
        <a href="http://zxing.appspot.com/scan?ret=http://oak.cats.ohiou.edu/~td176301/javascript/1.7/BarCodeSearchPrototypePreAlphaBeta.htm?upc={CODE}&SCAN_FORMATS=UPC_A&SCAN_FORMATS=EAN_13">
            SCAN </a>
    </div>
    <div class="content">
        <h1 id="pickTitle" onclick="window.Chrome.TitleList.style.display = (window.Chrome.TitleList.style.display == 'none' ? '' : 'none');">
            Pick your title</h1>
        <div id="listTitle">
        </div>
    </div>
    <div class="content">
        <h1 id="pickThumb" onclick="window.Chrome.ThumbList.style.display = (window.Chrome.ThumbList.style.display == 'none' ? '' : 'none');">
            <img id="minithumb" src="" height="50" alt="?" title="Choose Thumb!" />
            Pick your thumbnail
        </h1>
        <div id="listThumb">
        </div>
    </div>
    <div class="content">
        <h1>
            Library Entry</h1>
        <h2 id="entryTitle">
        </h2>
        <h3 id="entryUPC">
        </h3>
        <img id="entryImg" src="" alt="[]" />
        <input type="button" value="Save" onclick="save();" />
        <input type="button" value="Cancel" onclick="alert('TODO');" />
    </div>
    <div class="content">
        <h1>
            My Library
            <input type="button" value="Load" onclick="reloadLibrary();" /></h1>
        <div id="libEntries">
        </div>
        <br style="clear: both; height: 0; font-size: 0; line-height: 0;" />
    </div>
</body>
</html>
